iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

從ES到ESNext - 30天輕鬆掌握ECMAScript系列 第 20

ES2018(ES9) - Promise、for await of

  • 分享至 

  • xImage
  •  

本系列文章經過重新編排和擴充,已出書為ECMAScript關鍵30天。原始文章因當時準備時程緊迫,多少有些許錯誤。為了避免造成讀者的困擾,以及配合書籍的內容規劃,將會陸續更新本系列文章。
本篇文章在 2021/11/2 已更新。

Promise.prototype.finally(callback)

可以將程式最後必須要執行到的邏輯,放在finally方法內的回呼函式,避免在thencatch的callback中撰寫重複的程式碼。

function getEven() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const n = Math.floor(Math.random() * 100);
            if (n % 2 == 0) {
                resolve(n);
            } else {
                reject('QQ');
            }
        }, 1);
    })
        .then((result) => console.log('then:', result))
        .catch((error) => console.error('catch:', error))
        .finally(() => console.log('finally done!'));
}

// getEven()
// catch: QQ
// finally done!

for await(元素 of 可迭代的物件)

如果要使用迴圈方式依序執行非同步函式的話,ES2018後可以使用for of迴圈,搭配async-await關鍵字,加上立即函式來實現。

const p1 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'p1'));
const p2 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'p2'));
const p3 = new Promise((resolve, reject) => setTimeout(reject, 100, 'p3'));

const promises = [p1, p2, p3];
(async function () {
    for await (let result of promises) {
        console.log('result:', result);
    }
})();

// Promise {<pending>}
// result: p1
// result: p2
// Uncaught (in promise) p3

上一篇
ES2017(ES8) - 尾逗號
下一篇
ES2018(ES9) - 正規表達式、其餘運算子
系列文
從ES到ESNext - 30天輕鬆掌握ECMAScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言